<template>
  <div id="setrole">
    <h1 class="titleTag">角色管理</h1>
    <el-form :inline="true" class="formone">
      <el-form-item>
        <el-input v-model="search" placeholder="角色名称" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="search = ''">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="addTo">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="tableDetail">
      <el-table ref="multipleTable" :data="tableData" height="520" style="width: 100%;">
        <el-table-column align="center" label="角色名称" prop="send_name"></el-table-column>
        <el-table-column align="center" label="角色描述" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="创建人" prop="send_city"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="send_area"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="review">编辑</el-button>
            <el-button @click="deleteSure(scope.$index, tableData)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 增加角色 -->
    <div class="addAddress">
      <el-dialog title="增加角色" :visible.sync="addDialog" center>
        <el-form label-position="left" :model="formData" :rules="rules" label-width="90px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" size="small"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="describe">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="formData.describe">
            </el-input>
          </el-form-item>
          <el-form-item label="关联权限" prop="describe">
            <el-tree :data="data" show-checkbox :props="defaultProps" node-key="id" :default-expanded-keys="[3]"
              @check="handleChecked">
            </el-tree>
          </el-form-item>
        </el-form>
        <div slot="footer" class="submitBUTTON">
          <button @click="addDialog=false">确认</button> <button>取消</button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "setrole",
  data() {
    return {
      addDialog: false,
      search: "",
      tableData: [
        {
          send_name: "财务",
          send_phone: "管理财务",
          send_city: "你好",
          send_area: "2020-11-20",
          id: "1"
        },
        {
          send_name: "财务",
          send_phone: "管理财务",
          send_city: "你好",
          send_area: "2020-11-20",
          id: "1"
        },
        {
          send_name: "财务",
          send_phone: "管理财务",
          send_city: "你好",
          send_area: "2020-11-20",
          id: "1"
        }
      ],
      formData: {
        //增加员工
        name: "",
        describe: ""
      },
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        describe: [
          { required: true, message: "请输入角色描述", trigger: "blur" }
        ]
      },
      data: [
        {
          id: 1,
          label: "所有栏目",
          children: [
            {
              id: 1,
              label: "首页",
              children: []
            },
            {
              id: 2,
              label: "企业认证",
              children: []
            },
            {
              id: 3,
              label: "运输管理",
              children: [
                {
                  id: 7,
                  label: "订单管理"
                },
                {
                  id: 8,
                  label: "运单管理"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    //新增
    addTo() {
      this.addDialog = true;
    },
    //编辑
    review() {
      this.addDialog = true;
    },
    // data 当前点击对象
    // checked 当前所有选中对象
    handleChecked(data, checked) {
      console.log(checked);
    },
  }
};
</script>

<style lang="scss">
#setrole .tableDetail .el-table__body-wrapper td {
  vertical-align: middle !important;
}
#setrole .el-tree {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding-bottom: 50px;
  .is-expanded:nth-of-type(1) > .el-tree-node__content:nth-of-type(1) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    height: 40px;
    line-height: 40px;
  }
  .el-tree-node__children {
    padding-top: 6px;
  }
}
</style>
<style lang="scss" scoped>
#setrole {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .tableDetail span {
    line-height: 35px;
  }
}
</style>
